<template>
    <el-row :span="24" class="col">
        <el-col :span="3" style="text-align: right;padding: 7px 10px;">门店名称</el-col>
        <el-col :span="20"><el-input v-model="xiaoqu.communityName"></el-input></el-col>
    </el-row>
    <el-row :span="24" class="col" style="margin: 10px 0;">
        <el-col :span="3" style="text-align: right;padding: 7px 10px;">所属地区</el-col>
        <el-col :span="20">
            <el-row style="margin-bottom: 20px;">
                <el-col :span="24">
                    <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange" />
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24"><el-input v-model="xiaoqu.communityAddress"></el-input></el-col>
            </el-row>
        </el-col>
    </el-row>
    <el-row :span="24" class="col">
        <el-col :span="3" style="text-align: right;padding: 7px 10px;">门店坐标</el-col>
        <el-row :span="20">
            <el-col :span="4"><el-button @click="getlocation">获取位置</el-button></el-col>
            <el-col :span="12" style="padding:10px 0;margin-left: 80px;">{{ weizhi }}</el-col>
        </el-row>
    </el-row>
    <el-row :span="24" class="col" style="margin: 20px 0;">
        <el-col :span="3" :offset="18">
            <el-button type="default" @click="cancle">取消</el-button></el-col>
        <el-col :span="3">
            <el-button type="primary" @click="save">保存</el-button></el-col>
    </el-row>
</template>

<script setup>
import { ref,defineEmits } from "vue";
import { regionData,codeToText } from "element-china-area-data";
import axios from "axios";

const options = ref(regionData);
const selectedOptions = ref([]);
let weizhi=ref("");

let xiaoqu = ref({
    addOrUpdateFlag: 1,
    communityAddress:"",
    communityAreaCode:"",
    communityCity:"",
    communityCoordinates:"",
    communityDistrict:"",
    communityId:"",
    communityLatitude:"",
    communityLongitude:"",
    communityName:"",
    communityProvince:"",
});

// const address = ref("");
const emits = defineEmits(["operate"]);

const handleChange = () => {
    xiaoqu.value.communityProvince=codeToText[selectedOptions.value[0]];
    xiaoqu.value.communityCity=codeToText[selectedOptions.value[1]];
    xiaoqu.value.communityDistrict=codeToText[selectedOptions.value[2]];
    xiaoqu.value.communityCoordinates=xiaoqu.value.communityProvince+xiaoqu.value.communityCity+xiaoqu.value.communityDistrict;
}
const save = function () {
    emits("operate",xiaoqu.value);
}
const cancle = function () {
    emits("operate");
}

const getlocation = async function () {
    let res = await axios.get(`https://restapi.amap.com/v3/geocode/geo?key=457886b5972a97e93fb9cdccebfd450f&address=${xiaoqu.value.communityCoordinates+ xiaoqu.value.communityName}`);
    weizhi.value=res.data.geocodes[0].location;
    if(res.data.geocodes[0].location){
        xiaoqu.value.communityLatitude=res.data.geocodes[0].location.split(",")[0];
        xiaoqu.value.communityLongitude=res.data.geocodes[0].location.split(",")[1];
    }
    
}

// watchEffect(function(){
// })
</script>

<style lang="less" scoped></style>